<template>
    <div class="card-list">
        <div class="count-card" v-for="(item, index) in list" :key="index">
            <img src="@/assets/images/count-card/lt.svg" class="icon lt">
            <img src="@/assets/images/count-card/rt.svg" class="icon rt">
            <img src="@/assets/images/count-card/lb.svg" class="icon lb">
            <img src="@/assets/images/count-card/rb.svg" class="icon rb">
            <div class="item">
                <!-- 不带有环比、同比 -->
                <div class="no-percent" v-if="!item.ring && !item.basis">
                    <div class="left text-overflow">
                        {{ item.label }}
                    </div>
                    <div class="line line-l"></div>
                    <div class="right">
                        <div class="right-box">
                            <el-popover :content="`${item.value}万人`" placement="bottom">
                                <template #reference>
                                    <div class="num text-overflow">{{ item.value }}</div>
                                </template>
                            </el-popover>
                            <div class="unit">{{ item.unit }}</div>
                        </div>
                    </div>
                </div>
                <!-- 带有环比、同比 -->
                <div class="percent" v-else>
                    <div class="up-box">
                        <div class="left text-overflow">
                            {{ item.label }}
                        </div>
                        <div class="line line-s"></div>
                        <div class="right">
                            <div class="right-box">
                                <el-popover :content="`${item.value}万人`" placement="bottom">
                                    <template #reference>
                                        <div class="num text-overflow">{{ item.value }}</div>
                                    </template>
                                </el-popover>
                                <div class="unit">万人</div>
                            </div>
                        </div>
                    </div>
                    <div class="down-box">
                        <div class="down-box_flex">
                            <div class="down-label">环比</div>
                            <img :src="trendIconMap[item.rightTrend]" class="down-icon">
                            <div class="down-percent" :class="[item.rightTrend == 'up' ? 'up-text' : 'down-text']">{{
                                item.ring }}%</div>
                        </div>
                        <div class="down-box_flex">
                            <div class="down-label">同比</div>
                            <img :src="trendIconMap[item.basisTrend]" class="down-icon">
                            <div class="down-percent" :class="[item.basisTrend == 'up' ? 'up-text' : 'down-text']">{{
                                item.basis }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="js">
import upImg from '@/assets/images/count-card/up.svg';
import downImg from '@/assets/images/count-card/down.svg';

const trendIconMap = {
    up: upImg,
    down: downImg
}

const list = [
    { label: "当前客流", value: 236, unit: "万人", show: true, ring: "", basis: "", rightTrend: "up", basisTrend: "" },
    { label: "近一天", value: 1263, unit: "万人", show: true, ring: "32", basis: "32", rightTrend: "up", basisTrend: "up" },
    { label: "近一周", value: 43158, unit: "万人", show: true, ring: "32", basis: "32", rightTrend: "up", basisTrend: "down" },
    { label: "累计", value: 941530, unit: "万人", show: true, ring: "", basis: "", rightTrend: "", basisTrend: "" }
]
</script>
<style scoped lang="scss">
$horn-distance: -3px;

.card-list {
    display: flex;
    justify-content: center;
    align-items: center;

    .count-card {
        position: relative;
        background: url("@/assets/images/count-card/bg.png");
        background-position: center center;
        background-repeat: no-repeat;
        border: 1px solid #294941;
        display: inline-block;
        border-radius: vw(8);
        margin: 0 vw(5);

        .icon {
            width: vw(15);
            position: absolute;
        }

        .lt {
            left: $horn-distance;
            top: $horn-distance;
        }

        .rt {
            right: $horn-distance;
            top: $horn-distance;
        }

        .lb {
            left: $horn-distance;
            bottom: $horn-distance;
        }

        .rb {
            right: $horn-distance;
            bottom: $horn-distance;
        }

        .item {
            width: vw(266);
            height: vh(116);
            display: flex;
            align-items: center;
            overflow: hidden;

            .no-percent {
                display: flex;
            }

            .no-percent,
            .percent {
                width: 100%;
            }

            .up-box {
                display: flex;
            }

            .down-box {
                display: flex;
                justify-content: space-evenly;
                flex: 1;
            }

            .down-box_flex {
                display: flex;
                width: vw(110);
                align-items: center;
            }

            .line {
                width: vw(1);
                background: #255565;
                margin: 0 vw(10) 0 vw(13);
            }

            .line-l {
                height: vh(78);
            }

            .line-s {
                height: vh(57);
            }

            .down-percent {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: vw(14);
            }

            .up-text {
                color: #005FFF;
            }

            .down-text {
                color: #D44D15;
            }

            .left {
                max-width: vw(80);
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: vw(20);
                color: #BDCFE7;
                margin-top: vh(10);
                text-align: center;
                margin-left: vw(17);
            }

            .down-label {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(14);
                color: rgba(188, 188, 188, 0.6);
            }

            .down-icon {
                width: vw(16);
                margin: 0 vw(4);
            }

            .right {
                margin-top: vh(5);
            }

            .right-box {
                display: flex;
                align-items: center;
            }

            .num {
                max-width: vw(90);
                font-family: BMDoHyeon, BMDoHyeon;
                font-weight: normal;
                font-size: vw(28);
                color: #FFFFFF;
                text-shadow: 0px 0px 8px #105457;
                text-stroke: 1px #3472CD;
                text-align: left;
                font-style: normal;
                -webkit-text-stroke: 1px #3472CD;
                cursor: pointer;
            }

            .unit {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(18);
                color: rgba(255, 255, 255, 0.8);
                margin-left: vw(8);
            }

        }
    }
}
</style>